<template>
	<view class="content" @catchtouchmove="">
		<view class="layout-page">
			<Home v-show="activeTabbar == tabbars[0].name" ref="home" />
			<My v-show="activeTabbar == tabbars[1].name" ref="my" />
		</view>
		<lj-tabbar :active='activeTabbar' :tabbars="tabbars" @change="handleChangeTabbar" @click="onClickTabbar" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		// onShareTimeline
	} from '@dcloudio/uni-app'

	import LjTabbar from '/components/lj-tabbar/lj-tabbar.vue'
	import Home from '@/pages_temp/views/home.vue'
	import My from '@/pages_temp/views/my.vue'

	let activeTabbar = ref("home")
	const tabbars = reactive([{
		name: 'home',
		text: '首页',
		icon: '/static/home.png',
		iconActive: '/static/home-active.png',
		dot: 999
	}, {
		name: 'my',
		text: '我的',
		icon: '/static/mine.png',
		iconActive: '/static/mine-active.png'
	}])
	const props = defineProps({
		from: String
	})
	console.log('props', props);
	let currentInstance = getCurrentInstance()

	const handleChangeTabbar = (item) => {
		console.log('change:', item);
		activeTabbar.value = item.name
		uni.setNavigationBarTitle({
			title: item.text
		});
		nextTick(() => {
			if (typeof(currentInstance.ctx.$refs[item.name]._onShow) == 'function') {
				currentInstance.ctx.$refs[item.name]._onShow(props)
			}
		})
	}

	const onClickTabbar = (item) => {
		console.log('click:', item);
	}

	onShareAppMessage((res) => {
		console.log('onShareAppMessage', res);
		return {
			title: 'uniapp',
			path: '/pages/index/index?userId=1',
			iamgeUrl: 'https://ygsab.ygteacher.com/storage/images/login-bg1.jpg'
		}
	})

	// uni.showShareMenu({ menus: ["shareAppMessage", "shareTimeline"] })
	// onShareTimeline(res => {
	// 	console.log("onShareTimeline", res);
	// 	return {
	// 		title: 'uniapp',
	// 		path: '/pages/index/index?userId=1',
	// 		iamgeUrl: 'https://ygsab.ygteacher.com/storage/images/login-bg1.jpg'
	// 	}
	// })
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
		background-color: whitesmoke;

		.layout-page {
			min-height: 0;
			flex: 1;
		}
	}
</style>
